<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
    <meta name="format-detection" content="telephone=no"/>
    <meta name="apple-mobile-web-app-status-bar-style" content="black"/>
    <meta name="apple-mobile-web-app-capable" content="yes"/>
    <title>Title</title>
    <!-- 定制版 ionic 样式 -->
    <link rel="stylesheet" href="vendor/vonic.min.css">


</head>
<body>
<von-app></von-app>

<!-- 依赖库 axios/vue/vue-router -->
<script src="vendor/axios.min.js"></script>
<script src="vendor/vue.min.js"></script>
<script src="vendor/vue-router.min.js"></script>

<!-- vonic 核心文件 -->
<script src="vendor/vonic.min.js"></script>

<script>


    // 页面组件
    const Index = {
        template: `
            <div class="page has-navbar" v-nav="{title: '选项卡', showBackButton: true}">
    <tabs :tab-items="tabs" :tab-index="tabIndex" :on-tab-click="onTabClick"></tabs>

    <div class="page-content">
      <p>
        Active Tab Index: {{ tabIndex }}
      </p>

      <p>
        active category index: {{ categories[categoryIndex] }}
      </p>
    </div>

    <tabs :tab-items="categories"
          :tab-index="categoryIndex"
          position="bottom"
          bg-color="assertive"
          tab-color="light"
          :on-tab-click="onCategoryClick"
    ></tabs>
  </div>
        `,
        data(){
            return {
                tabs: [
                    "tab 1",
                    "tab 2",
                    "tab 3"
                ],
                tabIndex: 0,
                categories: [
                    "女装",
                    "男装",
                    "内衣",
                    "鞋靴",
                    "箱包",
                    "更多"
                ],
                categoryIndex: 0
            }
        },
        methods: {
            onTabClick(index) {
                console.log(index)
                this.tabIndex = index
            },
            onCategoryClick(index) {
                this.categoryIndex = index
                console.log('category changed, current tab index is:', index);
            }
        }
    };

    const About = {
        template: `
            <div class="page has-navbar" v-nav="{ title: 'About', showBackButton: true }">
                <div class="page-content text-center">
                    <h2 class="padding">Nothing here.</h2>
                    <router-link class="button button-assertive" to="/dialog">
                        <i class="ion-information-circled"></i> About
                    </router-link>
                </div>
            </div>
        `
    };

    const Input = {
        template: `
          <div class="page has-navbar" v-nav="{title: '输入框', showBackButton: true}">
            <div class="page-content padding-top">
              <item class="item-icon-right" @click.native="$router.forward('inputDefault')">
                Default<span class="item-note">默认</span>
                <i class="icon ion-ios-arrow-right"></i>
              </item>
              <item class="item-icon-right" @click.native="$router.forward('inputFloatingLabel')">
                Floating Label<span class="item-note">悬浮标签效果</span>
                <i class="icon ion-ios-arrow-right"></i>
              </item>
            </div>
          </div>
      `
    };

    const InputDefault = {
        template: `
            <div class="page" v-nav="{title: '默认输入框', showBackButton: true}">

    <div class="page-content padding-top">
          <div class="item item-divider">
          有标签: {{username}}
          </div>
          <von-input type="text" v-model="username" placeholder="用户名" label="用户名"></von-input>
          <von-input type="password" v-model="password" placeholder="密码" label="密码" style="margin-bottom: 5px;"></von-input>

          <div class="padding">
          <button class="button button-positive button-block">确认</button>
          </div>

          </div>
          </div>
        `,
        data() {
            return {
                username: '',
                password: '',
            }
        }
    };



    // 路由定义
    const routes = [
        {path: '/', component: Index},
        {path: '/input', component: Input},
        {path: '/inputDefault', component: InputDefault},
    ];

    // 配置应用
    //    Vonic.app.setConfig('pushMethod', 'replace')
    // 启动应用
    Vue.use(Vonic.app, {
        routes: routes,
        pushMehod: 'push', // push, replace
        pageTransition: 'ios'
    });


</script>

</body>
</html>
